<template>
	<div class="couponsBox" v-if="coupons.length>0"
		@click="$router.push({path: '/pages/user/coupon/GetCoupon/main'})">
		<div class="home_coupon">
			<div class="coupon_box" v-for="(item,index) in coupons" :key="index">
				<img class="bgimg"
					src="https://zykj-sales.oss-cn-hangzhou.aliyuncs.com/miniprogram/client/static/zymall/syyhqbg.png"
					alt="">
				<div class="coupon_left">
					<div class="couponPrice"><span>￥</span>{{item.couponPrice}}</div>
					<div class="coupon_money">满{{item.useMinPrice}}减{{item.couponPrice}}</div>
				</div>
				<div class="receive">立即领取</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "coupon-list",
		props: {
			config: {
				type: Object,
				required: true
			}
		},
		mounted() {
		},
		data() {
			return {
				coupons: [
					{
						couponPrice:100,
						useMinPrice:300,
						couponPrice:500
					},
					{
						couponPrice:100,
						useMinPrice:300,
						couponPrice:500
					},
					{
						couponPrice:100,
						useMinPrice:300,
						couponPrice:500
					},
					{
						couponPrice:100,
						useMinPrice:300,
						couponPrice:500
					}
				]
			};
		},
		methods: {
		},
		computed: {}
	};
</script>

<style lang="scss" scoped>
	.couponsBox {
		width: auto;
	}

	.home_coupon {
		width: 750rpx;
		display: flex;
		flex-wrap: wrap;
		padding-top: 16rpx;

		.coupon_box {
			width: 356rpx;
			height: 136rpx;
			margin-left: 16rpx;
			position: relative;
			margin-bottom: 8rpx;

			.bgimg {
				width: 356rpx;
				height: 136rpx;
			}

			.coupon_left {
				width: 222rpx;
				height: 136rpx;
				position: absolute;
				left: 5rpx;
				top: 0;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;

				.couponPrice {
					color: #ffffff;
					font-size: 52rpx;
					height: 60rpx;
					line-height: 60rpx;

					span {
						font-size: 24rpx;
					}
				}

				.coupon_money {
					height: 40rpx;
					line-height: 40rpx;
					color: #ffffff;
					font-size: 24rpx;
				}
			}

			.receive {
				position: absolute;
				right: 33rpx;
				top: 0;
				height: 136rpx;
				width: 60rpx;
				color: #FF983D;
				font-size: 28rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				flex-direction: column;
			}
		}
	}
</style>